<template>
  <div style="padding-bottom: 42px;">
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
    <div class="tab-title tablist-title" style="display: none;">
      {{second_level_cname}}
    </div>
    <div class="second-info pc-bk" style="display: none;">
      <div class="second-tablist">
        <div class="tablist-ele" v-for="(secondtab,index) in secondlist"  @click="moreBtn" :data-id="secondtab.id">
          <span v-bind:class="{'active':secondtab.is_selected === 1}">{{secondtab.name}}</span> <i v-if="index < secondlist.length - 1">·</i>
        </div>
      </div>
      <div class="second-info-text" v-if="note!=='' ">
        {{note}}
      </div>
    </div>
    <div class="top-content-block pc-bk">
      <div class="left-nav pc-bk" v-bind:class="{'scroll':scrolldetail === 1}" ><!--左侧导航-->
        <div class="detail-search">
          <input type="text"  v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
          <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
        </div>
        <div class="side-header hy detail">
          <span class="sidle-text">{{first_level_cname}}
          <!-- <i>BRAINPOWER</i> -->
          </span>
          <span class="sidle-icon"><img src="../../img/mobile/side-header-hy.jpg"></span>
        </div>
        <div class="meeting-list  detail-sidle">
          <ul>
            <li v-for="(meetlist, index) in tablist" v-bind:class="{'open': meetlist.is_selected === 1}" :data-id="tablist.length">
              <div class="detail-sidle-main" @click="moreBtn" :data-id="meetlist.id" :data-type="meetlist.content_type">
                <span class="focus-icon">
                </span>
                <span class="focus-title-link">
                  {{meetlist.name}}
                </span>
              </div>
              <div class="open-sidle" v-bind:class="{'hidden': meetlist.is_selected !== 1}" v-if="meetlist.children.length > 0">
                <div class="open-sidle-list" v-bind:class="{'active' : listchild.is_selected === 1}" @click="tomoreList" :data-id="listchild.id" :data-cid="listchild.parent_cid" :data-type="listchild.content_type" v-for="(listchild, childindex) in meetlist.children">
                  {{listchild.name}}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="listpage-content" v-if="data.list.length>0" v-bind:class="{'scroll':scrolldetail === 1}" >
        <div class="side-header hy-light">
          <span class="sidle-text">{{second_level_cname}}</span>
          <span class="sidle-icon"><img src="../../img/mobile/side-header-light.jpg"></span>
        </div>
        <div class="content-list-author">
          <div class="content-author-header" :style="{backgroundImage:'url(' + author_info.cover_path + ')'}"></div>
          <div class="content-author-info">
            <div class="author-info-name">
              {{author_info.title}}
            </div>
            <div class="author-info-text">
              {{author_info.note}}
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="content-list-block">
          <div class="content-list-body list">
            <div class="agenda-list"  @click="linkDetail" :data-id="contlist.id" v-for="contlist in data.list">
              <div class="agenda-img" v-lazy:background-image="{src: contlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
              <div class="agenda-title hy">
                {{contlist.title}}
              </div>
              <div class="agenda-article-info"
                   style="/* autoprefixer: off*/
                              -webkit-box-orient: vertical;
                              /* autoprefixer: on*/">
                {{contlist.note}}
              </div>
              <div class="article-share-icon">
                <img src="../../img/mobile/at-share-icon.png">
              </div>
            </div>
            <div class="mobile-top">
              <div class="content-list three-list" @click="linkDetail" :data-id="contlist.id" v-for="contlist in data.list">
                <div class="content-list-ele">
                  <div class="pc-right-line">
                    <div class="left-img" v-lazy:background-image="{src: contlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
                  </div>
                  <div class="right-text two-info">
                    <div class="right-content-text">
                      {{contlist.title}}
                    </div>
                    <div class="right-content-note pc-bk">
                      {{contlist.note}}
                    </div>
                    <!-- <div class="content-info list-info">
                      {{contlist.author}} {{contlist.publish_time}}
                    </div> -->
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
            <!-- <div class="see-more-btn" v-if="showmore">
              <span @click="moreList">查看更多</span>
            </div> -->
            <div class="list-page">
              <el-pagination
                  @current-change="handleCurrentChange"
                  background
                  layout="prev, pager, next"
                  :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="no-content" v-else>
        <div class="nosearch">
          <img src="../../img/mobile/no_search.png" alt="">
        </div>
        空空如也！
      </div>
    </div>
    <footernav></footernav>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import { Indicator, Spinner } from 'mint-ui'
  import navblock from './components/nav'
  import searchtab from './components/searchtab'
  import searchlist from './components/search'
  import footernav from './components/footernav'
  export default {
    data () {
      return {
        scrolldetail: 0,
        searchtext: '',
        pages: 1,
        total: '',
        limtsize: 9,
        tablist: [],
        showsearchlist: false,
        data: {
          list: []
        },
        page: 1,
        loading: false,
        second_level_cname: '',
        showmore: true,
        imgUrl: '',
        secondlist: [],
        first_level_cname: '智库',
        author_info: ''
      }
    },
    components: {
      Spinner,
      navblock,
      searchtab,
      searchlist,
      footernav
    },
    beforeCreate(){
      var metaEl = document.getElementsByTagName("meta")
      metaEl[3]['content'] = "";
    },
    created () {
      this.tabid = this.$route.query.id
      this.getDatalist(this.tabid, this.page)
      var imgUrl = require('../../img/mobile/blank.jpg')
      this.imgUrl = imgUrl
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= 100) {
          this.scrolldetail = 1
        } else {
          this.scrolldetail = 0
        }
      },
      searchBtn1 () {
        this.showsearchlist = true
      },
      opensearch (val) {
        console.log('test:' + val)
        this.showsearch = val
      },
      searchlink (val) {
        console.log('testsss:' + val)
        this.showsearchlist = val
      },
      searchcan (val) {
        this.showsearchlist = val
      },
      cpryrightBtn () {
        this.$router.push('/home/copyright')
      },
      contactBtn () {
        this.$router.push('/home/contactus')
      },
      linkDetail (e) {
        console.log(e.currentTarget.dataset.id)
        let routeData = this.$router.resolve({ path: '/home/detail', query: { id: e.currentTarget.dataset.id } })
        window.open(routeData.href, '_blank')
      },
      handleCurrentChange (val) {
        this.getDatalist(this.tabid, val)
      },
      getDatalist (tab, page) {
        var that = this
        var param = {
          author_id: tab,
          page: page
        }
        Indicator.open('加载中...')
        console.log(param)
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.authordetail), this.params, res => {
          that.data.list = res.news
          this.second_level_cname = res.news[0].second_level_cname
          document.title = this.second_level_cname + '-国际金融论坛'
          var total = res.news.length
          that.total = total
          this.author_info = res.author_info
          this.secondlist = res.nav
          this.note = res.note
          if (total !== 0) {
            that.first_level_cid = that.data.list[0].first_level_cid
            console.log('1')
          } else {
            console.log('2')
          }
          that.data.total = res.total
          that.tablist = res.nav
          Indicator.close()
          that.loading = false
        }, res => {
          console.log(res)
          Indicator.close()
          this.loading = false
        })
      },
      backClick () {
        this.$router.go(-1)
      },
      moreList () {
        var thispage = this.page + 1
        this.page = thispage
        this.loading = true
        this.getDatalist(this.tabid, thispage)
      },
      tomoreList (e) {
        let conttype = e.currentTarget.dataset.type
        let contid = e.currentTarget.dataset.id
        let contcid = e.currentTarget.dataset.cid
        if (conttype === 'source') {
          this.$router.push('/home/ifflist?id=' + contid + '&cid=' + contcid)
        } else if (conttype === 'news') {
          this.getDatalist(contid, 1)
          this.$router.push('/home/list?id=' + contid)
        }
      },
      moreBtn (e) {
        let conttype = e.currentTarget.dataset.type
        if (conttype === 'AUTHOR') {
          this.$router.push('/home/authorlist?id=' + e.currentTarget.dataset.id)
        } else {
          this.$router.push('/home/list?id=' + e.currentTarget.dataset.id)
        }
      }
    }
  }
</script>
<style>

  .tab-title.tablist-title{
    font-weight: bold;
  }
  .learn-all{
    color: #4e6e6d;
    display: inline-block;
    float: right;
    margin-top: 7px;
    line-height: 23px;
  }
  .learn-all img{
    width: 7px;
    vertical-align: middle;
    margin-left: 5px;
  }
  .top-big-img{
    margin: 10px 0;
  }
  .top-big-img img{
    width:100%;
  }
  .top-content-intro{
    font-size: 16px;
    color: #2b2b2b;
    line-height: 1.6;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
  }
  .content-list{
    padding: 15px 0;
  }
  .footer-content{
    background: #222126;
    color: #ffffff;
    margin-top: 30px;
  }
  .footer-tab li.noline{
  border-right:none;
  }
  .see-more-btn{
    text-align: center;
    margin-bottom: 20px;
  }
  .see-more-btn span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 25px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color: #9b9b9b;
    border:1px solid #9b9b9b;
    margin: 20px 0;
  }
  .loading-spinner{
    text-align: center;
  }
  .mint-spinner-fading-circle{
    margin: 10px auto;
  }
  .second-tablist{
    margin-bottom: 20px;
    font-size: 18px;
    color: #4e6e6d;
    font-weight: bold;
  }
  .second-info-text{
    font-size: 17px;
    line-height: 1.6;
    color: #353535;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
  }
</style>
